<template>
  <Form @success="queryModel.pageNo = 1; search()" inline labelWidth="80px" :options="searchOptions" :loading="loading"
    :model="queryModel" reset="重置" submit="搜索" add="上传图片" addCode="pictureAdd" @add="dialogRef.show()"
    formCode="pictureGet">
  </Form>
  <Table :cols="cols" v-valid="'pictureGet'" :data="list" :total="total" :page="queryModel" @change="search">
    <template #name="{ row: { name } }">
      <img v-if="name" :style="{ height: '200px' }" :src="url + 'goods/' + name" />
    </template>
    <template #create_time="{ row: { create_time } }">
      {{ create_time && dayjs(create_time).format(dateType) }}
    </template>
    <template #action="{ row: { id } }">
      <ElButton type="danger" @click="delPicture(id)">删除</ElButton>
    </template>
  </Table>
  <Dialog v-valid="'pictureAdd'" title="添加图片" ref="dialogRef" @ok="confirmAdd">
    <el-upload :on-error="error" ref="uploadRef" :on-success="success" :headers="headers" accept="image/*" multiple
      list-type="picture-card" :action="url + 'picture/add'" :auto-upload="false">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
  </Dialog>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { dayjs, ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { debounce, valid } from '@/utils/common';
import { getAll, del, IPicture, ISearch } from '@/api/picture';
import { dateType } from '@/utils/consts';
import ask from 'com/Confirm';

/**
 * 服务端接口地址
 */
const url = process.env.VUE_APP_BASE_URL;

/**
 * 删除业务开始
 */

/**
 * 删除图片
 * @param id 
 */
const delPicture = async (id: number) => {
  let res: any;
  try {
    res = await ask('您确定要删除此图片吗？');
    await del(id);
    search();
  } catch (error) { }
  res && res();
}

/**
 * 删除业务结束
 */

/**
 * 搜索业务开始
 */

/**
 * 图片列表
 */
const list = ref<IPicture[]>([]);
/**
 * 总条数
 */
const total = ref(0);
/**
 * loading
 */
const loading = ref(false);
/**
 * 搜索模型
 */
const queryModel = ref(<ISearch>{
  pageNo: 1,
  pageSize: 10
});

/**
 * 搜索表单
 */
const searchOptions = {
  start_date: {
    title: '起始日期',
    tag: 'date',
    width: '150px'
  },
  end_date: {
    title: '结束日期',
    tag: 'date',
    width: '150px'
  }
}

/**
 * 列
 */
const cols = {
  name: {
    title: '图片'
  },
  create_time: {
    title: '上传时间'
  },
  action: {
    title: '操作',
    width: '150px'
  }
}

/**
 * 搜索方法
 */
const search = async () => {
  if (!valid('pictureGet')) return;
  try {
    const { start_date, end_date } = queryModel.value;
    loading.value = true;
    const { data, count } = await getAll({
      ...queryModel.value,
      start_date: start_date && dayjs(start_date).format('YYYY-MM-DD') as any,
      end_date: end_date && dayjs(end_date).add(1, 'days').format('YYYY-MM-DD') as any
    });
    list.value = data;
    total.value = count;
  } catch (error) { }
  loading.value = false;
}

search();

/**
 * 搜索业务结束
 */

/**
 * 上传业务开始
 */

/**
 * vuex
 */
const store = useStore();
/**
 * dialog引用
 */
const dialogRef = ref();
/**
 * 上传组件引用
 */
const uploadRef = ref();

/**
 * 头部
 */
const headers = computed(() => ({
  Authorization: 'bearer ' + store.getters.token
}));

/**
 * 提交添加
 */
const confirmAdd = () => {
  uploadRef.value?.submit();
}

/**
 * 上传成功事件
 */
const success = debounce(() => {
  ElMessage.success('图片上传成功');
  dialogRef.value.hide();
  queryModel.value.pageNo = 1;
  search();
});

/**
 * 图片上传失败事件
 */
const error = debounce((error: Error) => {
  ElMessage.error('图片上传失败');
});

/**
 * 上传业务结束
 */
</script>

<style lang="scss" scoped></style>